import { upload_staticNode } from './cla_upload_staticNode';
import { upload_eventBind } from './cla_upload_eventBind';
import {
  attri_prop_load,
  attri_prop_load_val,
  spacename_upload,
  upload_file_form,
} from '../DataDefine/sourceData';
import type { upload_props } from './cla_upload_props';
import { listenEvent_mana } from '../../global_comps/Classes/listenEvent_mana/Classes/cla_listenEvent_mana';
import {
  remove_attribute,
  set_attribute,
} from '../../global_comps/Func/set_attribute';
import {
  get_collection_keyVal_node_by_form_key,
  get_collection_keyVal_node_info,
} from '../../global_comps/uni_comps/keyVal_node/keyVal_node';
import { upload_file_body } from '../uni_comps/upload_file/DataDefine/sourceData';
import { css_disnone } from '../../global_comps/Css';
import { settimeNth_anima_check } from '../../../global/Func/settimeNth';
import {
  quick_func_target,
  remove_quick_func_target,
} from '../../global_comps/uni_comps/quick_func_float/quick_func_float';
import { inject_remove_doc_per_delay } from '../../global_comps/DataDefine/sourceData';
import { inject_chi, remove_chi } from '../../global_comps/Func';
import { remove_collection_inp_val } from '../../global_comps/Func/remove_inp_val';

const upload_dataManaTag = 'upload_dataMana';

export class upload_dataMana extends upload_staticNode {
  get [Symbol.toStringTag]() {
    return upload_dataManaTag;
  }

  constructor(props?: upload_props) {
    super(props);
  }

  /**
   * 事件 绑定 this
   */
  eventBind = new upload_eventBind();

  /**
   * 事件 监听管理
   */
  eventM = new listenEvent_mana(spacename_upload);

  form_info: { [_: string]: any } = {};

  /**
   * 正常流 文档时  移除 上传 主体元素 的 手指
   */
  normal_doc_remove_class() {
    // remove_class(this.dom_body, [
    //   css_cursor_pointer,
    //   css_color_active_border_hover,
    // ]);
  }

  /**
   * 特别流 文档时 添加 上传 主体元素 的 手指
   */
  special_doc_add_class() {
    // remove_class(
    //   this.dom_body,
    //   [css_cursor_pointer, css_color_active_border_hover],
    //   true
    // );
  }

  /**
   * 装载 文件 信息
   * 启用动画
   */
  async load_file() {
    this.#set_attri_load_file();

    this.#inject_file_type_doc();

    this.#quick_func_bind();
  }

  async change_file() {
    this.#remove_all_inp_val();
  }

  /**
   * 移除 文件
   *
   * 启用 移除 动画
   */
  async remove_file() {
    this.#remove_attri_load_file();

    this.#remove_file_type_doc();

    this.#undo_quick_func_bind();

    this.#remove_all_inp_val();
  }

  /**
   * 清空 当前 upload form 表单中 所有 的 keyVal_node 值
   */
  #remove_all_inp_val() {
    let collection_cur_keyVal_node =
      get_collection_keyVal_node_by_form_key(upload_file_form);

    remove_collection_inp_val(collection_cur_keyVal_node);
  }

  /**
   * 绑定 快速 功能
   */
  #quick_func_bind() {
    quick_func_target(this.dom_func_border);
  }

  #undo_quick_func_bind() {
    remove_quick_func_target();
  }

  /**
   * 引入 文件 描述流
   */
  #inject_file_type_doc() {
    let cur_i = 1;

    let cur_dom: HTMLElement;

    for (cur_dom of this.dom_body.children as any) {
      if (cur_dom.classList.contains(css_disnone)) {
        cur_i++;

        settimeNth_anima_check(
          this.dom_body,
          cur_i * inject_remove_doc_per_delay,
          inject_chi(cur_dom)
        );
      }
    }
  }

  /**
   * 移除 文件 描述 流
   */
  #remove_file_type_doc() {
    let cur_i = this.dom_body.children.length;

    let cur_dom: HTMLElement;

    for (cur_dom of this.dom_body.children as any) {
      // 排除 上传文件 元素
      if (cur_dom.id == upload_file_body) {
        continue;
      }

      cur_i--;

      settimeNth_anima_check(
        this.dom_body,
        cur_i * inject_remove_doc_per_delay,
        remove_chi(cur_dom)
      );
    }
  }

  /**
   * 在 记录 文件后 更改 upload 的 top 位置 --top 20%
   */
  #set_attri_load_file() {
    set_attribute(this.dom_body, attri_prop_load, attri_prop_load_val);
  }

  /**
   * 在 移除 文件后 更改 upload 的 top 位置 -- 居中
   */
  #remove_attri_load_file() {
    remove_attribute(this.dom_body, attri_prop_load);
  }

  /**
   * 获取 当前 子元素 所有 的 记录值
   */
  #get_cur_chi_node_info() {
    this.form_info = get_collection_keyVal_node_info(this.dom_body.children);
  }

  /**
   * 上传 文件信息
   */
  upload_file() {
    this.#get_cur_chi_node_info();
    console.log(this.form_info);
  }
}
